{% extends "base.html"%}

{% block head %}
<style>
    * {
        font-size: 16px;
    }

    .sidebar_user {
        /*background-color: #f5f5f5;*/
    }

    nav {
        padding: 0;
    }

    ul {
        text-align: center;
    }

    ul.sidebar-nav a {
        color: #33cccc;
        /*font-weight: ;*/
        font-size: 20px;
    }

    .li_active {
        background-image: url("{{ url_for('static', filename='picture/sidebar.jpeg') }}");
        background-size: 100%;
        background-position: 15px 170px;
    }

    #sidebar_ul li:hover, #sidebar_ul li:active {
        background-image: url("{{ url_for('static', filename='picture/sidebar.jpeg') }}") !important;
        /*background-size: 100%;*/
        /*background-position: 15px 170px;*/
    }

    #sidebar_ul li a:hover, #sidebar_ul li a:active {
        background-image: url("{{ url_for('static', filename='picture/sidebar.jpeg') }}") !important;
        /*background-size: 100%;*/
        /*background-position: 16px 170px;*/
    }
</style>

{% endblock %}
{% block body%}


<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Ctpbee</a>
                <a class="navbar-brand" href="#">社区</a>
                <a class="navbar-brand" href="#">文档</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li style="float: right"><a href="" onclick="logout()">注销</a></li>
                <li style="float: right"><a href="">{{ username}}</a></li>

                <li class="github" style="float: right"><a href="https://github.com/somewheve/ctpbee"> <img
                        src="{{ url_for('static', filename='icon/github.png')}}" height="20px;" alt=""></a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="row" id="main">
    <div class="col-md-3" style="padding: 0;">
        <!-- Sidebar -->
        <nav class="navbar navbar-default sidebar_user" id="sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav" id="sidebar_ul">
                <p class="sidebar-brand" style="text-align: center; font-size: 22px;line-height: 60px">
                    Ctpbee控制台
                </p>
                <li class="li_active">
                    <a href="#" onclick="switch_action('account')"><i class="fa fa-fw fa-home"></i>账户</a>
                </li>
                <li>
                    <a href="#" onclick="switch_action('market')"><i class="fa fa-fw fa-folder"></i>行情</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-file-o"></i>策略</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-cog"></i>回测</a>
                </li>
                <li>
                    <a href="#" onclick="switch_action('order')"><i class="fa fa-fw fa-bank"></i>下单</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-md-9 iframeBox" style="padding: 0;">
        <iframe id="iframe_instance" src="{{url_for('account')}}" height="100%" width="100%" frameborder="0"
                scrolling="0">
        </iframe>
    </div>
</div>


{% endblock %}

{% block script%}
<script>
    $("#sidebar_ul>li").click(function () {
        $(this).addClass("li_active").siblings().removeClass("li_active");

    });
    // 设置高度
    var height = $(window).height() - 51;
    $("#main").css('height', height);
    $(".sidebar_user").css('height', height);
    $(".iframeBox").css('height', height);

    function switch_action(title) {
        curren_symbol = localStorage.getItem("current_symbol");
        var url = "{{url_for('order_request', symbol=key) }}" + curren_symbol;
        var mapd = {
            "account": "{{ url_for('account') }}",
            "market": "{{ url_for('market') }}",
            "order": url
        };
        $("#iframe_instance").attr("src", mapd[title]);
    }

    socket.on("account", function (data) {
        // console.log("data.json", data.json, "index");
        localStorage.setItem("account", JSON.stringify(data['data']))
    });

    function logout() {
        localStorage.clear();
        // 访问注销路由
        $.ajax({
            url

        })

    }


</script>

{%endblock %}
